<template>
    <section class="msite">

        <Header :title="address.name||'正在定位中...'">
            <template v-slot:left>
                  <span class="header_search" @click="$router.push('/search')">
              <i class="iconfont icon-sousuo"></i>
            </span>
            </template>

            <template v-slot:right>
              <span class="header_login" @click="$router.push('/login')">
                  <span class="header_login_text">登录|注册</span>
              </span>
            </template>
        </Header>
        <!--首页导航-->
        <nav class="msite_nav">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="(item,index) in foodCategory" :key="index">
                        <div class="link_to_food"  v-for="food in item" :key="food.id" >
                            <div class="food_container">
                                <img :src="'https://fuss10.elemecdn.com'+food.image_url">
                            </div>
                            <span>{{food.title}}</span>
                        </div>
                    </div>
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
            </div>
        </nav>

        <!--首页附近商家-->
        <div class="msite_shop_list">
            <div class="shop_header">
                <i class="iconfont icon-xuanxiang"></i>
                <span class="shop_header_title">附近商家</span>
            </div>
            <div class="shop_container">
                <ul class="shop_list" v-for="item in shops" :key="item.id" v-if="shops.length>0">
<!--                    <li class="shop_li border-1px" @click="$router.push({-->
<!--                                                    name:'shop',-->
<!--                                                    params:{-->
<!--                                                        id:item.id-->
<!--                                                    }-->
<!--                                                                   })">-->
                    <li class="shop_li border-1px" @click="$router.push(`/shop/${item.id}`)">

                        <a>
                            <div class="shop_left">
                                <img class="shop_img" :src="'https://fuss10.elemecdn.com'+item.image_path">
                            </div>
                            <div class="shop_right">
                                <section class="shop_detail_header">
                                    <h4 class="shop_title ellipsis">{{item.name}}</h4>
                                    <ul class="shop_detail_ul" v-for="support in item.supports" :key="support.id">
                                        <li class="supports">{{support.icon_name}}</li>
                                    </ul>
                                </section>
                                <section class="shop_rating_order">
                                    <section class="shop_rating_order_left">
                                      <Star :score="item.rating" :size="24"></Star>
                                        <div class="rating_section">
                                         {{item.rating}}
                                        </div>
                                        <div class="order_section">
                                            月售{{item.recent_order_num}}单
                                        </div>
                                    </section>
                                    <section class="shop_rating_order_right">
                                        <span class="delivery_style delivery_right">{{item.delivery_mode.text}}</span>
                                    </section>
                                </section>
                                <section class="shop_distance">
                                    <p class="shop_delivery_msg">
                                        <span>¥{{item.float_minimum_order_amount}}起送</span>
                                        <span class="segmentation">/</span>
                                        <span>配送费约¥{{item.float_delivery_fee}}</span>
                                    </p>
                                </section>
                            </div>
                        </a>
                    </li>
                </ul>
                <ul v-else>
                    <li>
                        <img src="./images/shop_back.svg" alt="loading">
                    </li>
                    <li>
                        <img src="./images/shop_back.svg" alt="loading">
                    </li>
                    <li>
                        <img src="./images/shop_back.svg" alt="loading">
                    </li>
                    <li>
                        <img src="./images/shop_back.svg" alt="loading">
                    </li>
                </ul>
            </div>
        </div>
    </section>
</template>

<script>
    import Swiper from "swiper/swiper-bundle.min.js"
    import "swiper/swiper-bundle.min.css"
    import {mapState} from 'vuex'
    import Star from "../../components/Star/Star";
    export default {
        name: "Msite",
        components: {Star},
        data() {
            return {}
        },
        computed: {
            ...mapState({
                address:state=>state.msite.address,
                category:state=>state.msite.category,
                shops:state=>state.msite.shops
            }),
            foodCategory(){
                let arr=[]
                let arr1=[]
                for (let i = 0; i < this.category.length; i++) {
                    if(arr1.length==0){
                        arr.push(arr1)
                    }
                    arr1.push(this.category[i])
                    if((i+1)%8==0){
                        arr1=[]
                    }
                }
                return arr
            }
        },
        async mounted() {
            await this.$store.dispatch('getFoodCategory')
            await this.$store.dispatch('getShops')
            new Swiper(".swiper-container", {
                loop: true, //循环
                pagination: { //分页符
                    el: '.swiper-pagination',
                },
            })

        },
        // watch:{
        //     category(){
        //         this.$nextTick(()=>{
        //             new Swiper(".swiper-container", {
        //                 loop: true, //循环
        //                 pagination: { //分页符
        //                     el: '.swiper-pagination',
        //                 },
        //             })
        //         })
        //     }
        // }

    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    @import "../../common/stylus/minix.styl"
    .msite //首页
        width 100%

        .msite_nav
            bottom-border-1px(#e4e4e4)
            margin-top 45px
            height 200px
            background #fff

            .swiper-container
                width 100%
                height 100%

                .swiper-wrapper
                    width 100%
                    height 100%

                    .swiper-slide
                        display flex
                        flex-wrap wrap

                        .link_to_food
                            width 25%

                            .food_container
                                display block
                                width 100%
                                text-align center
                                padding-bottom 10px
                                font-size 0

                                img
                                    display inline-block
                                    width 50px
                                    height 50px

                            span
                                display block
                                width 100%
                                text-align center
                                font-size 13px
                                color #666

                .swiper-pagination
                    > span.swiper-pagination-bullet-active
                        background #02a774

        .msite_shop_list
            top-border-1px(#e4e4e4)
            margin-top 10px
            background #fff

            .shop_header
                padding 10px 10px 0

                .shop_icon
                    margin-left 5px
                    color #999

                .shop_header_title
                    color #999
                    font-size 14px
                    line-height 20px

            .shop_container
                margin-bottom 50px

                .shop_list
                    .shop_li
                        bottom-border-1px(#f1f1f1)
                        width 100%

                        > a
                            clearFix()
                            display block
                            box-sizing border-box
                            padding 15px 8px
                            width 100%

                            .shop_left
                                float left
                                box-sizing border-box
                                width 23%
                                height 75px
                                padding-right 10px

                                .shop_img
                                    display block
                                    width 100%
                                    height 100%

                            .shop_right
                                float right
                                width 77%

                                .shop_detail_header
                                    clearFix()
                                    width 100%

                                    .shop_title
                                        float left
                                        width 200px
                                        color #333
                                        font-size 16px
                                        line-height 16px
                                        font-weight 700

                                        &::before
                                            content '品牌'
                                            display inline-block
                                            font-size 11px
                                            line-height 11px
                                            color #333
                                            background-color #ffd930
                                            padding 2px 2px
                                            border-radius 2px
                                            margin-right 5px

                                    .shop_detail_ul
                                        float right
                                        margin-top 3px

                                        .supports
                                            float left
                                            font-size 10px
                                            color #999
                                            border 1px solid #f1f1f1
                                            padding 0 2px
                                            border-radius 2px

                                .shop_rating_order
                                    clearFix()
                                    width 100%
                                    margin-top 18px
                                    margin-bottom 8px

                                    .shop_rating_order_left
                                        float left
                                        color #ff9a0d


                                        .rating_section
                                            float left
                                            font-size 10px
                                            color #ff6000
                                            margin-left 4px

                                        .order_section
                                            float left
                                            font-size 10px
                                            color #666
                                            transform scale(.8)

                                    .shop_rating_order_right
                                        float right
                                        font-size 0

                                        .delivery_style
                                            transform-origin 35px 0
                                            transform scale(.7)
                                            display inline-block
                                            font-size 12px
                                            padding 1px
                                            border-radius 2px

                                        .delivery_left
                                            color #fff
                                            margin-right -10px
                                            background-color #02a774
                                            border 1px solid #02a774

                                        .delivery_right
                                            color #02a774
                                            border 1px solid #02a774

                                .shop_distance
                                    clearFix()
                                    width 100%
                                    font-size 12px

                                    .shop_delivery_msg
                                        float left
                                        transform-origin 0
                                        transform scale(.9)
                                        color #666

                                    .segmentation
                                        color #ccc

</style>